<template>
	<!-- 歌单 -->
	<view class="main">
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="loadMore">
			<view class="gedan_tab">
				<view class="gedan_select">
					<text class="">{{ tag }}</text>
				</view>
				<view><text @click="togglePtype" class="catselectbtn">选择分类</text></view>
			</view>
			<view class="gedan_content">
				<block>
					<view class="songSheet_wrap">
						<!-- 控制遍历数量6个 -->
						<view class="songSheet_item" v-for="(item, index) in playlist" :key="index">
							<!-- 图片容器 -->
							<view class="songSheet_img" @click="goPlayList(item.id)">
								<!-- 图片 -->
								<image :src="item.coverImgUrl" />
								<!-- 播放量。。。 -->
								<view class="songSheet_info">
									<!-- 播放量 -->
									<view class="play_count_wrap">
										<!-- 图标 -->
										<text class="iconfont icon-play" style="font-size:30rpx;"></text>
										<!-- 数值 -->
										<text class="play_count">{{ item.playCount | playcount }}</text>
									</view>
								</view>
							</view>
							<!-- 标题 -->
							<view class="songSheet_titles">{{ item.name }}</view>
						</view>
					</view>
				</block>
			</view>
			<drawer :show="drawerShow" @cancel="cancel" @ensure="ensure">
				<view class="tagbox">
					<view @click="clickTag(item.name)" class="item" v-for="(item, index) in taglist" :key="index">{{ item.name }}</view>
				</view>
			</drawer>
		</scroll-view>
	</view>
</template>

<script>
import { listRequest } from '../../api/square.js';
export default {
	data() {
		return {
			cateisShow: false,
			loading: true,
			catelist: {
				res: {},
				checked: {
					name: '全部歌单'
				}
			},
			playlist: [],
			taglist: [{ name: '全部' }],
			tag: '全部',
			limit: 24,
			drawerShow: false,
			page:1,
		};
	},
	onLoad() {
		this.getTag();
		this.getlist();
	},
	methods: {
		async getTag() {
			let res = await listRequest({
				url: '/playlist/catlist'
			});
			this.taglist.push(...res[1].data.sub);
		},
		async getlist() {
			const res = await listRequest({
				url: '/top/playlist',
				data: {
					offset: (this.page-1)*this.limit,
					cat: this.tag,
					limit: this.limit
				}
			});
			// console.log(res);
			this.playlist.push(...res[1].data.playlists)
		},
		togglePtype() {
			this.drawerShow = true;
		},
		//取消
		cancel() {
			this.drawerShow = false;
		},
		goPlayList(id) {
			wx.navigateTo({
				url: '/pages/playlist/playlist?id=' + id
			});
		},
		clickTag(tagName) {
			this.tag = tagName;
			this.page=1
			this.playlist=[]
			this.getlist();
			this.cancel();
		},
		loadMore() {
			this.page = this.page + 1;
			this.getlist();
		},
	}
};
</script>

<style lang="scss" scoped>
.scroll {
	width: 100%;
	height: 100vh;
}
.gedan_tab {
	padding: 40rpx 20rpx;
	display: flex;
	justify-content: space-between;
}

.gedan_select {
	border-left: 6rpx solid #3c9;
	/* height: 10rpx; */
}

.gedan_select text {
	text-align: center;
	font-size: 30rpx;
	padding-left: 20rpx;
}

.catselectbtn {
	background-image: url();
	border: 1rpx solid #eee;
	color: #999;
	font-size: 26rpx;
	padding: 8rpx 20rpx 8rpx 40rpx;
	background-position: 10rpx center;
	background-repeat: no-repeat;
	border-radius: 3rpx;
}

/* 歌单广场 */

.songSheet_wrap {
	display: flex;
	flex-wrap: wrap;
	padding: 5rpx;
	justify-content: space-around;
}

.songSheet_wrap_active {
	display: flex;
	flex-wrap: wrap;
	padding: 5rpx;
	justify-content: space-around;
	margin-bottom: 100rpx;
}

.songSheet_item {
	width: 30%;
	margin-bottom: 20rpx;
}

.songSheet_img {
	position: relative;
}

.songSheet_img image {
	width: 100%;
	border-radius: 15rpx;
	height: 220rpx;
}

.songSheet_img .songSheet_info {
	position: absolute;
	top: 5rpx;
	right: 5rpx;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	color: #fff;
	font-size: 24rpx;
}

.songSheet_titles {
	font-size: 28rpx;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 选择分类 */

#catewrap {
	padding: 0 15rpx;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	left: 0;
	top: 0;
	background-color: #fff;
}

.close {
	width: 78rpx;
	height: 78rpx;
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url();
}

#closecatelist {
	margin: 15rpx auto;
}

.catelist {
	margin-bottom: 20rpx;
	overflow: hidden;
	padding-bottom: 2rpx;
}

.cl_list {
	width: 179rpx;
	border: 1rpx solid #eee;
	text-align: center;
	height: 90rpx;
	font-size: 26rpx;
	line-height: 90rpx;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin: 0 -1rpx -1rpx 0;
	float: left;
}

.cl_ico {
	height: 182rpx;
	line-height: 1;
}

.cl_ico image {
	width: 80rpx;
	height: 80rpx;
	margin: 35rpx auto 15rpx;
	display: block;
}

#cateall {
	float: none;
	width: auto;
	margin: 20rpx auto;
}

.cl_ico_checked,
.cl_ico_hot {
	content: '';
	position: absolute;
}

.cl_ico_hot {
	background-image: url();
	width: 56rpx;
	height: 56rpx;
	left: 0;
	top: 0;
	background-size: 100% 100%;
}

.cl_ico_checked {
	background-image: url();
	width: 38rpx;
	height: 38rpx;
	background-position: right bottom;
	right: 0;
	bottom: 0;
	background-size: 48rpx 48rpx;
}

.checked {
	border-color: #bb2c08;
	z-index: 2;
}

#catselectbtn {
	background-image: url();
	border: 1rpx solid #eee;
	color: #999;
	font-size: 24rpx;
	padding: 8rpx 20rpx 8rpx 40rpx;
	background-position: 10rpx center;
	float: right;
	background-repeat: no-repeat;
	border-radius: 3rpx;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.tagbox {
	display: flex;
	flex-wrap: wrap;
	margin: 10upx 30upx;
	.item {
		width: 32.33%;
		font-size: 28upx;
		text-align: center;
		height: 80rpx;
		line-height: 80upx;
		border: 2upx solid #e3e3e3;
	}
}
</style>
